<template>
  <view class="feedback-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">问题反馈</view>
      <view class="nav-empty" style="width: 60rpx;"></view>
    </view>

    <scroll-view class="feedback-scroll" scroll-y>
      <view class="feedback-container">
        <!-- 反馈类型 -->
        <view class="feedback-section">
          <view class="section-title">反馈类型</view>
          <view class="type-options">
            <view 
              class="type-item" 
              :class="{ active: selectedType === type.value }"
              @click="selectedType = type.value"
              v-for="(type, index) in feedbackTypes" 
              :key="index"
            >
              {{ type.label }}
            </view>
          </view>
        </view>

        <!-- 问题描述 -->
        <view class="feedback-section">
          <view class="section-title">
            问题描述
            <text class="required">*</text>
          </view>
          <textarea 
            class="description-input"
            placeholder="请详细描述您遇到的问题..."
            v-model="description"
            maxlength="500"
            @input="updateTextCount"
          ></textarea>
          <view class="text-count">{{ textCount }}/500</view>
        </view>

        <!-- 上传图片 -->
        <view class="feedback-section">
          <view class="section-title">上传图片（可选）</view>
          <view class="image-uploader">
            <view 
              class="image-item" 
              v-for="(img, index) in uploadedImages" 
              :key="index"
            >
              <image 
                :src="img" 
                mode="aspectFill"
                class="uploaded-image"
              ></image>
              <view class="delete-img" @click.stop="deleteImage(index)">
                <text>×</text>
              </view>
            </view>
            
            <view 
              class="upload-btn" 
              @click="chooseImage"
              v-if="uploadedImages.length < maxImages"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">添加图片</text>
            </view>
          </view>
          <view class="upload-hint">最多可上传{{ maxImages }}张图片，帮助我们更好地解决问题</view>
        </view>

        <!-- 联系方式 -->
        <view class="feedback-section">
          <view class="section-title">联系方式（可选）</view>
          <input 
            class="contact-input"
            placeholder="请输入您的手机号或邮箱，方便我们反馈结果"
            v-model="contact"
            maxlength="50"
          ></input>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
          <button 
            class="submit-btn"
            :disabled="!canSubmit"
            @click="submitFeedback"
          >
            提交反馈
          </button>
        </view>

        <!-- 反馈须知 -->
        <view class="feedback-notice">
          <view class="notice-title">反馈须知</view>
          <view class="notice-content">
            <text>1. 我们将在1-3个工作日内处理您的反馈</text>
            <text>2. 请您如实描述问题，以便我们更好地为您解决</text>
            <text>3. 涉及账号安全的问题，请提供相关证明材料</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 提交成功弹窗 -->
    <view class="success-modal" v-if="showSuccess">
      <view class="modal-content">
        <view class="success-icon">✓</view>
        <view class="success-title">反馈提交成功</view>
        <view class="success-desc">我们会尽快处理您的反馈，感谢您的支持！</view>
        <button class="confirm-btn" @click="closeSuccessModal">
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 反馈类型
      feedbackTypes: [
        { label: '功能异常', value: 'function' },
        { label: '界面问题', value: 'ui' },
        { label: '账号问题', value: 'account' },
        { label: '建议反馈', value: 'suggestion' },
        { label: '其他问题', value: 'other' }
      ],
      selectedType: 'function',
      
      // 问题描述
      description: '',
      textCount: 0,
      
      // 上传图片
      uploadedImages: [],
      maxImages: 3,
      
      // 联系方式
      contact: '',
      
      // 提交状态
      showSuccess: false
    };
  },
  
  computed: {
    // 是否可以提交
    canSubmit() {
      return this.description.trim().length > 0;
    }
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 更新文本计数
    updateTextCount(e) {
      this.textCount = e.detail.value.length;
    },
    
    // 选择图片
    chooseImage() {
      const remaining = this.maxImages - this.uploadedImages.length;
      
      uni.chooseImage({
        count: remaining,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 临时路径
          const tempFilePaths = res.tempFilePaths;
          this.uploadedImages = this.uploadedImages.concat(tempFilePaths);
        }
      });
    },
    
    // 删除图片
    deleteImage(index) {
      this.uploadedImages.splice(index, 1);
    },
    
    // 提交反馈
    submitFeedback() {
      if (!this.canSubmit) return;
      
      // 模拟提交
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.showSuccess = true;
        
        // 重置表单
        this.description = '';
        this.textCount = 0;
        this.uploadedImages = [];
        this.contact = '';
      }, 1500);
    },
    
    // 关闭成功弹窗
    closeSuccessModal() {
      this.showSuccess = false;
      this.navBack();
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$primary-disabled: #84B9FF;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$text-placeholder: #C9CDD4;
$bg: #F5F7FA;
$card: #FFFFFF;
$border: #E5E6EB;
$warning: #FF4D4F;
$success: #00B42A;

.feedback-page {
  background-color: $bg;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 自定义导航栏
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: $bg;
    }
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 滚动区域
.feedback-scroll {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - 90rpx);
}

// 内容容器
.feedback-container {
  padding: 30rpx 30rpx 50rpx;
}

// 反馈区块
.feedback-section {
  background-color: $card;
  border-radius: 18rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

// 区块标题
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  
  .required {
    color: $warning;
    font-size: 32rpx;
    margin-left: 8rpx;
  }
}

// 反馈类型选项
.type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.type-item {
  padding: 14rpx 24rpx;
  background-color: $bg;
  border: 1px solid $border;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: $text-secondary;
  white-space: nowrap;
  transition: all 0.2s;
  
  &.active {
    background-color: $primary-light;
    border-color: $primary;
    color: $primary;
    font-weight: 500;
  }
  
  &:hover {
    transform: translateY(-2rpx);
  }
}

// 问题描述输入框
.description-input {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  background-color: $bg;
  border: 1px solid $border;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: $text-primary;
  line-height: 1.6;
  resize: none;
  
  &::placeholder {
    color: $text-placeholder;
  }
}

// 文本计数
.text-count {
  text-align: right;
  font-size: 24rpx;
  color: $text-tertiary;
  margin-top: 12rpx;
}

// 图片上传区域
.image-uploader {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  background-color: $bg;
}

.uploaded-image {
  width: 100%;
  height: 100%;
}

.delete-img {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  line-height: 1;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed $border;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: $bg;
  transition: all 0.3s;
  
  &:hover {
    border-color: $primary;
    background-color: $primary-light;
  }
  
  .upload-icon {
    font-size: 40rpx;
    color: $text-tertiary;
    margin-bottom: 10rpx;
  }
  
  .upload-text {
    font-size: 24rpx;
    color: $text-tertiary;
  }
}

.upload-hint {
  font-size: 22rpx;
  color: $text-tertiary;
  margin-top: 16rpx;
}

// 联系方式输入框
.contact-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: $bg;
  border: 1px solid $border;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: $text-primary;
  
  &::placeholder {
    color: $text-placeholder;
  }
}

// 提交按钮区域
.submit-section {
  padding: 10rpx 0 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: $primary;
  color: white;
  border: none;
  border-radius: 45rpx;
  font-size: 30rpx;
  font-weight: 500;
  box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.25);
  transition: all 0.2s;
  
  &:not(:disabled):hover {
    background-color: #0E42D2;
    transform: translateY(-2rpx);
  }
  
  &:disabled {
    background-color: $primary-disabled;
    box-shadow: none;
  }
}

// 反馈须知
.feedback-notice {
  background-color: $primary-light;
  border-radius: 18rpx;
  padding: 28rpx;
  margin-top: 10rpx;
  
  .notice-title {
    font-size: 26rpx;
    font-weight: 600;
    color: $primary;
    margin-bottom: 16rpx;
  }
  
  .notice-content {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    
    text {
      font-size: 24rpx;
      color: $text-secondary;
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      
      &::before {
        content: '•';
        color: $primary;
        margin-right: 10rpx;
        line-height: 1.5;
      }
    }
  }
}

// 成功弹窗
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.3s;
}

.modal-content {
  width: 600rpx;
  background-color: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: scaleIn 0.3s;
}

.success-icon {
  width: 100rpx;
  height: 100rpx;
  background-color: $success;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin-bottom: 30rpx;
}

.success-title {
  font-size: 32rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 16rpx;
}

.success-desc {
  font-size: 26rpx;
  color: $text-secondary;
  text-align: center;
  margin-bottom: 36rpx;
  line-height: 1.5;
  padding: 0 20rpx;
}

.confirm-btn {
  width: 280rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: $primary;
  color: white;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.2s;
  
  &:hover {
    background-color: #0E42D2;
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
</style>
    